<template>
    <div class="pagination-container">
        <div class="summary" v-if="showSummary">
            共 {{ totalPage }} 页，{{ total }} 条数据
        </div>
        <el-pagination background :layout="layout" :total="total" :page-size="pageSize" :current-page="currentPage"
            :page-sizes="pageSizes" :hide-on-single-page="hideOnSinglePage" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

const props = defineProps({
    total: {
        type: Number,
        required: true,
        default: 0
    },
    currentPage: {
        type: Number,
        required: true,
        default: 1
    },
    pageSize: {
        type: Number,
        default: 10
    },
    pageSizes: {
        type: Array,
        default: () => [10, 20, 50, 100]
    },
    hideOnSinglePage: {
        type: Boolean,
        default: false
    },
    layout: {
        type: String,
        default: 'prev, pager, next, jumper'
    }
})

const showSummary = computed(() => {
    if (!props.layout) return true
    try {
        const items = props.layout.toLowerCase().replace(/\s/g, '').split(',')
        return !items.includes('total')
    } catch {
        return true
    }
})

const emit = defineEmits(['update:currentPage', 'update:pageSize', 'pagination-change'])

const totalPage = computed(() => {
    return Math.ceil(props.total / props.pageSize)
})

const handleSizeChange = (val: number) => {
    emit('update:pageSize', val)
    emit('pagination-change', { page: 1, size: val })
}

const handleCurrentChange = (val: number) => {
    emit('update:currentPage', val)
    emit('pagination-change', { page: val, size: props.pageSize })
}
</script>

<style scoped lang="scss">
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;
    background: #fff;

    .summary {
        font-size: 14px;
        color: #606266;
        margin-right: 15px;
    }
}
</style>